<template>
  <div class="contain-body hdda-box">
    <Title></Title>
    <div class="search-contain-body">
      <el-form ref="form"
               inline
               :model="form"
               label-width="75px">
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">场馆名称：</div>
          <el-input v-model="form.cgmc"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <div class="d-ib font-table"
               slot="label">活动时间：</div>
          <el-date-picker type="date"
                          placeholder="选择日期"
                          v-model="form.date"
                          style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">活动名称：</div>
          <el-input v-model="form.activityName"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">活动地点：</div>
          <el-select v-model="form.region"
                     placeholder="请选择活动区域">
            <el-option label="区域一"
                       value="shanghai"></el-option>
            <el-option label="区域二"
                       value="beijing"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">活动类型：</div>
          <el-select v-model="form.zchdlx"
                     placeholder="请选择活动区域">
            <el-option label="区域一"
                       value="shanghai"></el-option>
            <el-option label="区域二"
                       value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <div class="d-ib font-table"
               slot="label">活动规模：</div>
          <el-input v-model="form.bigEvent"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="d-ib font-table"
               slot="label">审批状态：</div>
          <el-select v-model="form.approval"
                     placeholder="请选择活动区域">
            <el-option label="体育比赛活动"
                       value="shanghai"></el-option>
            <el-option label="文艺演出"
                       value="beijing"></el-option>
            <el-option label="销售"
                       value="xiaoshou"></el-option>
            <el-option label="晚会"
                       value="wanhui"></el-option>
            <el-option label="招聘会"
                       value="zhaopinhui"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button icon="el-icon-search"
                     class="button-search"
                     @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div>
      <div class="pos-r">
        <Title msg="信息列表"></Title>
      </div>
      <CustomTable :columns="columns"
                   :table-data="tableData">
      </CustomTable>
    </div>

    <el-dialog width="819px"
               center
               class="custom-dialog-fill font-table"
               title="活动审批"
               :visible.sync="dialog.open">

      <div class="dialog-title"
           slot="title">
        {{ dialog.title }}
      </div>

      <div class="d-f jc-c">

        <el-form class="font-table"
                 style="color: #000000;"
                 ref="form"
                 :model="form"
                 label-width="75px">
          <div class="mb-14">
            活动信息
          </div>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">方案名称：</div>
            <el-input v-model="form.schemeName"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">活动时间：</div>
            <el-date-picker type="date"
                            placeholder="选择日期"
                            v-model="form.date"
                            style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">活动名称：</div>
            <el-input v-model="form.activityName"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">活动地点：</div>
            <el-select v-model="form.region"
                       placeholder="请选择活动区域">
              <el-option label="区域一"
                         value="shanghai"></el-option>
              <el-option label="区域二"
                         value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">活动类型：</div>
            <el-select v-model="form.shape"
                       placeholder="请选择活动区域">
              <el-option label="区域一"
                         value="shanghai"></el-option>
              <el-option label="区域二"
                         value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">活动规模：</div>
            <div class="mb-14">
              <el-input v-model="form.bigEvent"></el-input>
            </div>
          </el-form-item>
          <div class="mb-14">
            审批信息
          </div>
          <div class="d-f jc-c mb-14 button-approve">
            <el-button type="text"
                       class="font-table mr111"
                       style="color: #000000;">同意
            </el-button>
            <el-button type="text"
                       style="color: #000000;"
                       class="font-table">不同意
            </el-button>
          </div>
          <el-form-item>
            <div class="d-ib font-table"
                 slot="label">备注：</div>
            <el-input type="textarea"
                      :rows="2"
                      v-model="form.remark">
            </el-input>
          </el-form-item>
          <div class="d-f jc-c">
            <el-button class="button-cancel"
                       @click="dialog.open = false">取 消
            </el-button>
            <el-button class="button-submit mr58"
                       @click="dialog.open = false">确 定
            </el-button>
          </div>
        </el-form>

      </div>

    </el-dialog>

  </div>
</template>

<script>
import Title from "../../../components/Title";
import CustomTable from "../../../components/CustomTable";

export default {
  name: "Hdda",
  components: { Title, CustomTable },
  data () {
    return {
      dialog: {
        title: '新增方案',
        open: false,
        type: 'add',//'edit','add','details'
      },
      form: {
        schemeName: '',
        activityName: '',
        region: '',
        date: '',
        bigEvent: '',
        shape: '',
        approval: '',
        desc: '',
        remark: ''
      },
      tableData: [
        // {
        //   '活动名称': '2021群星观展',
        //   '活动时间': '2021-06-12 18：00！22：00',
        //   '活动地点': '合川县人民广场',
        //   '活动类型': '文艺演出',
        //   '活动规模': '500人',
        //   '审批状态': '审批通过',
        // },
        // {
        //   '活动名称': '农机展销会',
        //   '活动时间': '2021-06-12 18：00！22：00',
        //   '活动地点': '合川县人民广场',
        //   '活动类型': '展销会',
        //   '活动规模': '1000人',
        //   '审批状态': '待审批',
        // },
        // {
        //   '活动名称': '2020群星观展',
        //   '活动时间': '2021-06-12 18：00！22：00',
        //   '活动地点': '合川县人民广场',
        //   '活动类型': '文艺演出',
        //   '活动规模': '500人',
        //   '审批状态': '审批通过',
        // },
      ],
      columns: [
        {
          key: 'cgbh',
          label: '场馆编号'
        },
        {
          key: 'cgmc',
          label: '场馆名称'
        },
        {
          key: 'dzmc',
          label: '地址名称'
        },
        {
          key: 'jcrq',
          label: '建成日期'
        },
        {
          key: 'hdrssx',
          label: '活动人数上限'
        },
        {
          key: 'zchdlx',
          label: '支持活动类型'
        }
      ],
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    onSubmit () {
      this.getList()
    },
    openOptions () {
      this.dialog.open = true
    },
    getList () {
      this.axios.post('/dxhd-cgda/selectPage', {
        current: 1,
        size: 10,
        entity: {
          cgmc: this.form.cgmc || '',
          zchdlx: this.form.zchdlx || ''
        }
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
      }).catch((error) => {
      });
    }
  }
}
</script>

<style lang="scss">
.hdda-box {
  .mb-14 {
    margin-bottom: 14px;
  }

  .mr111 {
    margin-right: 111px;
  }

  .mr58 {
    margin-right: 58px;
  }
}
</style>



